<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello React!</title>
    <!--注意导入顺序-->
    <script src="../bower_components/react/react.production.min.js"></script>
    <script src="../bower_components/react/react-dom.production.min.js"></script>
    <script src="./js/prop-types.js"></script>
    <!--将JSX语法 转换成javascript语法 -->
    <script src="../bower_components/babel/browser.min.js"></script>

    <link rel="stylesheet" href="../script/bootstrap-3.3.7.min.css">
</head>
<body>
<div id="example"></div>
<div id="example1"></div>
<script type="text/babel">
    // todo 通过父组件多次渲染 动态加载 li

    class Li extends React.Component {
        render() {
            return <li>{this.props.title}</li>
        }
    }

    class Ul1 extends React.Component {
        constructor(props) {
            super(props)
            this.state={arr1:[1,2,3]}
        }
        add(){
            let tmparr= this.state.arr1
            tmparr.push(Math.random())
            this.setState({
                arr1:tmparr
            })
        }
        render() {
            let result = []
            console.log(this.state.arr1)
            this.state.arr1.forEach(function (value,index) {
                    result.push(<Li key={index} title={value}/>) // todo 新版本react不需要加key 区别不同次渲染

            })
            return (
                <div>
                    <div className="btn btn-default" onClick={this.add.bind(this)}>动态添加</div>
                    <ul>
                        {result}
                    </ul>
                </div>
            )
        }

    }
    ReactDOM.render(
        <Ul1/>,
        document.getElementById("example")
    )
</script>
</body>

</html>